<template>
  <el-row :gutter="40" class="panel-group" >
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>今日预估收益</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="今日由推广带来的付款金额产生的付款预估收入"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">{{ statistics.retailAmount.todayRetailAmount }}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>
              昨日收益￥{{ statistics.retailAmount.yesterdayRetailAmount }}
            </div>
            <div>
              <i style="color: green" class="el-icon-top">{{
                statistics.retailAmount.proportion
              }}</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>今日付款订单</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="今日由推广带来的付款订单笔数，不含未付款和无效订单"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <!-- <i class="rmb">￥</i> -->
              <i class="num">{{ statistics.countOrder.countToday }}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>昨日付款订单{{ statistics.countOrder.countYesterday }}</div>
            <div>
              <i class="el-icon-top">{{ statistics.countOrder.proportion }}</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>今日交易额</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="今日由推广带来的付款金额产生的付款预估收入"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">101351</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>昨日销售额￥1023</div>
            <div>
              <i class="el-icon-top">10%</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>账户余额</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="可以提现到账的实际金额"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">{{statistics.totalAmount}}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>可提现金额({{statistics.totalAmount}}元)</div>
            <div>
              <div style="color: #409eff" @click="withdrawal(0)">去提现</div>
              <!-- <i class="el-icon-top">去提现</i> -->
            </div>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>本月预估收益</div>
            <div>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">
                  该收入仅为本月按付款金额计算所产生的预估收入，<br />
                  由于不同活动结算日期不一致，<br />
                  并非是您本月的实际结算金额，<br />
                  最终结算金额以月结后您账户内实际收到的金额为准。
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">{{ statistics.retailMonthAmount.monthAmount }}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>
              上月预估收益￥{{ statistics.retailMonthAmount.lastMonthAmount }}
            </div>
            <div>
              <i class="el-icon-top">{{
                statistics.retailMonthAmount.proportion
              }}</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>本月付款订单</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="本月由推广带来的付款订单笔数，不含未付款和无效订单"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <!-- <i class="rmb">￥</i> -->
              <i class="num">{{ statistics.countMonthOrder.monthCount }}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>
              上月付款订单{{ statistics.countMonthOrder.lastMonthCount }}
            </div>
            <div>
              <i class="el-icon-top">{{
                statistics.countMonthOrder.proportion
              }}</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>本月交易额</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="本月由推广带来的付款金额，不含未付款和无效订单"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">101351</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>上月交易额￥1023</div>
            <div>
              <i class="el-icon-top">10%</i>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="box">
          <div class="title">
            <div>年预估收益</div>
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="支持支付宝银行卡"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="nums">
            <div class="central">
              <i class="rmb">￥</i>
              <i class="num">{{statistics.yearRetailAmount}}</i>
            </div>
          </div>
          <!-- <el-divider></el-divider> -->
          <div
            class="title"
            style="border-top: 1px solid #e8e8e8; padding-top: 10px"
          >
            <div>支持支付宝/银行卡</div>
            <div>
              <!-- <el-button size="mini" type="primary">去绑定收款账号</el-button> -->
              <div style="color: #409eff" @click="withdrawal(1)">
                去绑定收款账号
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getHomePageCollectData } from "@/api/distribute/utils";
import { getUserProfile } from "@/api/system/user";

export default {
  data() {
    return {
      statistics: {},
    };
  },
  async created() {
    const id = await this.getUserInfo();
    await this.getList(id);

  },
  methods: {
    // getUserInfo() {
    //   const that = this;
    //   getUserProfile().then((response) => {
    //     this.creator = response.data.id;
    //     if (that.creator) {
    //       this.getList();
    //     }
    //   });
    // },
    async getUserInfo() {
      const that = this;
      const { data } = await getUserProfile();
      const creator = data.id;
      return creator;
      // this.creator = data.id;
      // if (data.id) {
      //   this.getList(data.id);
      // }
    },
    withdrawal(type) {
      if (type == 0) {
        this.$router.push("/finance/balance");
      } else if (type == 1) {
        this.$router.push("/finance/account");
      }
    },

    async getList(id) {
      console.log("residssss", id);
      const { data } = await getHomePageCollectData(id);
      this.statistics = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-panel-col {
  margin-bottom: 24px;
}
.title {
  display: flex;
  justify-content: space-between;
  // height: 40px;
}
.nums {
  display: flex;
  justify-content: center;
  align-items: center;
  .central {
    display: flex;
    padding-top: 16px;
    padding-bottom: 20px;
    .rmb {
      font-size: 30px;
    }
    .num {
      font-size: 30px;
    }
  }
}
</style>
